<template>
    <view class="whole">
        <view class="pay">
            <view class="header">
                <div>
                    <view class="pay">支付金额</view>
            <view class="payNum">
                <span style="font-size: 34rpx;">￥</span>{{price}}
            </view>
                </div>
            </view>
            <view class="listPay">
                <uni-icons type="weixin" size="60rpx" color="#00aa00"></uni-icons>
                <view class="text">
                    <view class="wx">微信支付</view>
                    <view class="subWx">推荐使用微信支付</view>
                </view>
                <view class="btn">
                    <label class="radio">
                        <radio :value="payType"  :checked="boolWx"  color="#FFCC33" style="transform:scale(0.7)"  @click="changePayType(1)" />
                    </label>
                </view>
            </view>
            <view class="listPay">
                <image src="../../static/zfbb.png" style="width: 75rpx;height: 75rpx;"></image>
                <view class="text">
                    <view class="wx">支付宝</view>
                </view>
                <view class="btn">
                    <label class="radio">
                        <radio :value="payType"  :checked="boolWb"  color="#FFCC33" style="transform:scale(0.7)"  @click="changePayType(2)" />
                    </label>
                </view>
            </view>
            <view class="bootom">
                <button type="warn" style="color: #fff;" @tap="gotoSuccess">确认支付</button>
            </view>
        </view>

    </view>
</template>
 
<script>
	import {
		store
	} from '@/uni_modules/uni-id-pages/common/store.js';
	import {
		get,
		post,
		setToken
	} from '@/utils/api.js';
    export default {
        data() {
            return {
				payType: 1, // 支付类型，默认微信支付
                boolWx: true,
                boolWb: false,
                price: 0, //支付金额
                orderNo: "", //订单号
                submiting: false//控制再次确认支付的弹出框
            }
        },
      onBackPress(event){
		  uni.setStorageSync('payStatus',"待支付")
            uni.switchTab({
                url:'/pages/index/index'
            });
           return true;
        },
		created() {
			this.price = uni.getStorageSync('price')
			console.log(uni.getStorageSync('oid'))
		},
		beforeDestroy() {
			uni.removeStorageSync('price')
			uni.removeStorageSync('oid')
		},
		methods:{
			
			            // 选择支付方式
			            changePayType(type) {
			                if(1==type){
			                    this.boolWx=true;
			                    this.boolWb=false;
			                }else{
			                    this.boolWx=false;
			                    this.boolWb=true;
			                }
			                this.payType = type
			                console.log(this.payType,"this.payType");
							},
			selectPayType(type) {
			            // 当用户点击时，更新payType为当前选中的支付类型
			    this.payType = type;
			        },
			gotoSuccess() {
				this.submitOrder()
				uni.navigateTo({
					url:'/pages/paySuccess/paySuccess'
				})
			},
			submitOrder() {
			post('/order/pay',
			{
			 oid:uni.getStorageSync('oid')
			}, {
			  needToken: true, 
				success: (res) => {
				if (res.statusCode === 200) {
                   console.log(res.data)
				}
			  }
			}); 	
			},
		}
    }
</script>
 
<style lang="scss">
    .whole {
        display: flex;
        justify-content: center;
 
        .header {
            display: flex;
            justify-content: center;
            align-items: center;
            text-align: center;
            flex-wrap: wrap;
            height: 300rpx;
 
            .pay {
                width: 100%;
                color: #717171;
            }
 
            .payNum {
                width: 100%;
                font-size: 44rpx;
                margin: 10rpx 0px 20rpx;
            }
        }
 
        .pay {
            width: 100%;
 
            .listPay {
                height: 130rpx;
                display: flex;
                align-items: center;
 
                .uni-icons {
                    margin-left: 20rpx;
                }
 
                .text {
                    width: 40%;
                    margin: 0px 20rpx 0px;
                }
 
                .btn {
                    width: 40%;
                    text-align: right;
                }
            }
 
            .bootom {
                width: 90%;
                margin: auto;
                margin-top: 20rpx;
            }
        }
 
    }
</style>